<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index-vmin.css">
</head>
<body>
    <!-- 先写成px再转化 -->
    <!-- 头部制作 -->
    <div class="home-header">
        <h1>优医问诊</h1>
        <div class="search"><img src="./img/search.svg" alt="">搜一搜</div>
    </div>
    <!-- 导航栏制作 -->
	<div class="home-nav">
		<ul class="row">
			<li>
				<a href="#">
					<img src="./img/doctor.svg" alt="">
					<h3>问医生</h3>
					<p>按科室查问医生</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/graphic.svg" alt="">
					<h3>极速问诊</h3>
					<p>20s医生极速回复</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/prescribe.svg" alt="">
					<h3>开药门诊</h3>
					<p>线上买药更方便</p>
				</a>
			</li>
		</ul>
		<ul class="row col-4">
			<li>
				<a href="#">
					<img src="./img/order.svg" alt="">
					<p>药品订单</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/docs.svg" alt="">
					<p>健康档案</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/rp.svg" alt="">

					<p>我的处方</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/find.svg" alt="">

					<p>疾病查询</p>
				</a>
			</li>
		</ul>
	</div>
	<!-- banner模块制作 -->
	<div class="banner">
		<img src="./img/get.png" alt="">
	</div>

	<!-- tabs切换模块 -->
	<div class="home-tabs">
		<div class="tabs-card">
			<ul>
				<li>关注</li>
				<li class="active">推荐</li>
				<li>护肤</li>
				<li>减脂</li>
				<li>饮食</li>
			</ul>
			<div class="line"></div>
		</div>
		<div class="tabs-content">
			<!-- 一个模块 -->
			<div class="con-item">
				<div class="con-head">
					<div class="avatar">
						<img src="./img/deafaultAvatar.jpg" alt="">
					</div>
					<div class="info">
						<p class="name">pink医生</p>
						<p class="desc">积水潭医院 皮肤科 主任医师</p>
					</div>
					<button> + 关注</button>
				</div>
				<div class="con-body">
					<h3 class="title">炎热夏季如何防晒？</h3>
					<p class="tags"># 儿童健康</p>
					<p class="info">炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的那大太阳无时不刻在考验着我们的肌肤…</p>
					<div class="imgs">
                        <!-- figure放图片 有默认外边距要去除-->
						<figure>
							<img src="./img/ad.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/5.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/6.jpg" alt="">
						</figure>
					</div>
					<p class="logs">
						<span>12 收藏</span>
						<span>120 评论</span>
					</p>
				</div>
			<!-- 一个模块 -->
			<div class="con-item">
				<div class="con-head">
					<div class="avatar">
						<img src="./img/deafaultAvatar.jpg" alt="">
					</div>
					<div class="info">
						<p class="name">pink医生</p>
						<p class="desc">积水潭医院 皮肤科 主任医师</p>
					</div>
					<button> + 关注</button>
				</div>
				<div class="con-body">
					<h3 class="title">炎热夏季如何防晒？</h3>
					<p class="tags"># 儿童健康</p>
					<p class="info">炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的那大太阳无时不刻在考验着我们的肌肤…</p>
					<div class="imgs">
                        <!-- figure放图片 -->
						<figure>
							<img src="./img/ad.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/5.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/6.jpg" alt="">
						</figure>
					</div>
					<p class="logs">
						<span>12 收藏</span>
						<span>120 评论</span>
					</p>
				</div>
			</div>
			<!-- 一个模块 -->
			<div class="con-item">
				<div class="con-head">
					<div class="avatar">
						<img src="./img/deafaultAvatar.jpg" alt="">
					</div>
					<div class="info">
						<p class="name">pink医生</p>
						<p class="desc">积水潭医院 皮肤科 主任医师</p>
					</div>
					<button> + 关注</button>
				</div>
				<div class="con-body">
					<h3 class="title">炎热夏季如何防晒？</h3>
					<p class="tags"># 儿童健康</p>
					<p class="info">炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的那大太阳无时不刻在考验着我们的肌肤…</p>
					<div class="imgs">
                        <!-- figure放图片 -->
						<figure>
							<img src="./img/ad.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/5.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/6.jpg" alt="">
						</figure>
					</div>
					<p class="logs">
						<span>12 收藏</span>
						<span>120 评论</span>
					</p>
				</div>
			</div>
			<!-- 一个模块 -->
			<div class="con-item">
				<div class="con-head">
					<div class="avatar">
						<img src="./img/deafaultAvatar.jpg" alt="">
					</div>
					<div class="info">
						<p class="name">pink医生</p>
						<p class="desc">积水潭医院 皮肤科 主任医师</p>
					</div>
					<button> + 关注</button>
				</div>
				<div class="con-body">
					<h3 class="title">炎热夏季如何防晒？</h3>
					<p class="tags"># 儿童健康</p>
					<p class="info">炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的那大太阳无时不刻在考验着我们的肌肤…</p>
					<div class="imgs">
                        <!-- figure放图片 -->
						<figure>
							<img src="./img/ad.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/5.jpg" alt="">
						</figure>
						<figure>
							<img src="./img/6.jpg" alt="">
						</figure>
					</div>
					<p class="logs">
						<span>12 收藏</span>
						<span>120 评论</span>
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<ul>
			<li><img src="./img/index-active.svg" alt=""></li>
			<li><img src="./img/notice-default.svg" alt=""></li>
			<li><img src="./img/mine-default.svg" alt=""></li>
			<li><img src="./img/article-default.svg" alt=""></li>
		</ul>
	</div>
</body>
</html>